<template>
  <nav class="navbar has-shadow is-fixed-top-desktop" role="navigation">

      <div class="container">
        <div class="navbar-brand">
          <router-link to="/" class="navbar-item">
            <img src="~/static/logo.png" alt="LOGO" width="144" height="28">
          </router-link>
          <div class="navbar-burger burger" :class="{ 'is-active': selected }" data-target="navMenu"
               @click="selected=!selected">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>

        <div id="navMenu" class="navbar-menu" :class="{ 'is-active': selected }" @click="selected=!selected">
          <div class="navbar-start">
          </div>
          <div class="navbar-end">
            <router-link class="navbar-item top-nav" to="/">
              <a>首页</a>
            </router-link>
            <router-link class="navbar-item top-nav" to="/profeed">
              <a>论文润色</a>
            </router-link>
            <router-link class="navbar-item top-nav" to="/trans">
              <a>专业翻译</a>
            </router-link>
            <router-link class="navbar-item top-nav" to="/fee">
              <a>收费标准</a>
            </router-link>
            <router-link class="navbar-item top-nav" to="/about">
              <a>关于我们</a>
            </router-link>
            <router-link class="navbar-item top-nav" to="/support">
              <a>支持与服务</a>
            </router-link>
            <div class="navbar-item" v-if="!logined">
              <div class="field is-grouped">
                <p class="control">
                  <nuxt-link to="/login" class="button is-warning">
                    <span>登录</span>
                  </nuxt-link>
                </p>
                <p class="control">
                  <nuxt-link to="/sign" class="button is-danger">
                    <span>注册</span>
                  </nuxt-link>
                </p>
              </div>
            </div>
            <div class="navbar-item has-dropdown is-hoverable" v-if="logined">
              <nuxt-link class="navbar-link" to="/">
                类型
              </nuxt-link>
              <div class="navbar-dropdown is-boxed">
                <nuxt-link class="navbar-item" to="/">
                  类型1
                </nuxt-link>
                <nuxt-link class="navbar-item" to="/">
                  类型2
                </nuxt-link>
              </div>
            </div>
          </div>
        </div>
      </div>

  </nav>
</template>

<script>


  export default {
    data() {
      return {
        selected: false,
        logined: false
      }
    },
    methods: {
      toLoginPage() {
        this.activeMainNav = '';
        this.logined = true;
        this.$router.push('/login')
      },
      toSignPage() {
        this.activeMainNav = '';
        this.$router.push('/sign')
      },
      handleLogout() {
        this.logined = false;
        this.$router.push('/')
      }
    }
  }
</script>

<style>
  .navbar-item a {
    color: #0a0a0a;
    font-size: 1rem;
  }

  a.top-nav.nuxt-link-exact-active {
    border-bottom: 2px solid #f89;
  }
</style>
